<!--
 * @Description: 工程月报
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2023-04-14 10:41:19
 * @LastEditTime: 2023-04-26 15:12:31
 * @FilePath: \cscec-pms-admin\src\views\project\projectMonthlyReport\index.vue
-->
<template>
  <base-breadcrumb>
    <a-spin :spinning="exporting">
      <!-- 搜索 -->
      <searchData
        :search-data="searchOption"
        @search="search"
      />
      <!-- 搜索 -->
      <a-card>
        <list-table
          ref="table"
          :rowKey="'id'"
          :columns="columns"
          :request="loadData"
        >
          <template
            slot="operation"
            slot-scope="text, record"
          >
            <MoreButton>
              <a
                v-btnPermission="'pm_064_loo_01'"
                @click="handleDetail(record)"
              >查看</a>
              <a
                v-btnPermission="'pm_064_exp_02'"
                @click="handleExport(record)"
              >导出</a>
            </MoreButton>
          </template>
        </list-table>
      </a-card>
    </a-spin>
  </base-breadcrumb>
</template>
<script>
import { searchOption, columns } from './model.js'
import { list } from '@/api/project/projectMonthlyReport.js'
export default {
  name: 'projectMonthlyReport',
  components: {},
  data() {
    return {
      // 查询参数
      searchData: {},
      // 搜索选项
      searchOption,
      // 表头
      columns,
      // 导出中
      exporting: false,
      //表格数据加载
      loadData: async (q) => {
        try {
          let { month } = this.searchData
          const res = await list.getPageProjectReport({
            pageNum: q.pageNo,
            pageSize: q.pageSize,
            param: {
              month: month ? this.moment(month).format('YYYY-MM') : void 0
            }
          })
          if (res.code === this.SUCCESS_CODE) {
            return { ...res, data: res.data.list }
          } else {
            return { code: 200, data: [] }
          }
        } catch (error) {
          console.log(error)
        }
      }
    }
  },
  methods: {
    /**
     * @description: 搜索
     * @param {Object} value 搜索数据
     * @return {Void}
     */
    search(value) {
      this.searchData = value || {}
      this.$refs.table.refresh(true)
    },
    /**
     * @description: 查看
     * @param {object} record 行数据
     * @return {void}
     */
    handleDetail(record) {
      const { id } = record
      this.$router.push({
        path: '/project/engineeringMonthlyReport/projectMonthlyReportDetail',
        query: {
          id
        }
      })
    },
    /**
     * @description: 导出
     * @param {object} record 行数据
     * @return {void}
     */
    async handleExport(record) {
      this.exporting = true
      try {
        const res = await list.exportWord(record.id)
        this.handleDownload(res)
      } catch (error) {
        console.log(error)
      }finally{
        this.exporting = false
      }
    },
    /**
     * @description: 下载
     * @return {void}
     */
    handleDownload(res) {
      const blob = new Blob([res.data])
      const filename = decodeURIComponent(res.headers['content-disposition'].split('filename=')[1])
      const downloadElement = document.createElement('a')
      const href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      downloadElement.download = filename // 获取文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() //点击下载
      document.body.removeChild(downloadElement) //下载完成移除元素
      window.URL.revokeObjectURL(href) //释放blob对象
    }
  }
}
</script>
<style lang="less" scoped>
</style>
